<template>
      
  <div>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row>
        <el-col :span="3">
          <el-date-picker
            v-model="queryInfo.query.start_date"
            type="date"
            placeholder="选择开始日期"
          >
          </el-date-picker
        ></el-col>
        <el-col :span="3">
          <el-date-picker
            v-model="queryInfo.query.end_date"
            type="date"
            placeholder="选择结束日期"
          >
          </el-date-picker></el-col
      ></el-row>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        class="dataTable"
        :default-sort="{ prop: 'attendance_date', order: 'descending' }"
      >
        <el-table-column prop="user_name" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="attendance_date" label="打卡日期" align="center">
        </el-table-column>
        <el-table-column label="打卡记录" align="center">
          <template slot-scope="scope">
            <div
              :class="{
                red:
                  scope.row.status === '早退' ||
                  scope.row.status === '迟到' ||
                  scope.row.status === '未签到' ||
                  scope.row.status === '下班未签到' ||
                  scope.row.status === '迟到早退' ||
                  scope.row.status === '迟到下班未签到',
                blue:
                  scope.row.status === '请假' ||
                  scope.row.status === '补打卡' ||
                  scope.row.status === '放假' ||
                  scope.row.status === '正常签到',
              }"
            >
              <span>{{ scope.row.updated_start_time }}</span>
              <span>,</span>
              <span>{{ scope.row.updated_end_time }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="工作时长(h)" align="center">
          <template slot-scope="scope">
            <span
              :class="{
                red:
                  scope.row.status === '早退' ||
                  scope.row.status === '迟到' ||
                  scope.row.status === '未签到' ||
                  scope.row.status === '下班未签到' ||
                  scope.row.status === '迟到早退' ||
                  scope.row.status === '迟到下班未签到',
                blue:
                  scope.row.status === '请假' ||
                  scope.row.status === '补打卡' ||
                  scope.row.status === '放假' ||
                  scope.row.status === '正常签到',
              }"
            >
              {{ (scope.row.updated_duration / 3600).toFixed(1) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          prop="status"
          column-key="status"
          :filters="tableStatus"
          align="center"
        >
          <template slot-scope="scope">
            <span
              :class="{
                red:
                  scope.row.status === '早退' ||
                  scope.row.status === '迟到' ||
                  scope.row.status === '未签到' ||
                  scope.row.status === '下班未签到' ||
                  scope.row.status === '迟到早退' ||
                  scope.row.status === '迟到下班未签到',
                blue:
                  scope.row.status === '请假' ||
                  scope.row.status === '补打卡' ||
                  scope.row.status === '放假' ||
                  scope.row.status === '正常签到',
              }"
            >
              {{ scope.row.status }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                icon="el-icon-more"
                size="small"
                @click="openDisplayInfo(scope.row)"
              >
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
      :title="userAttendanceName + ' 出勤详情'"
      :visible.sync="displayDialogVisible"
      width="50%"
      :before-close="displayHandleClose"
    >
      <el-descriptions class="margin-top" title="出勤信息" :column="4" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            早退 </template
          >{{ tongji[0] }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            迟到
          </template>
          {{ tongji[1] }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            请假
          </template>
          {{ tongji[2] }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            放假
          </template>
          {{ tongji[3] }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            未签到
          </template>
          {{ tongji[4] }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            补签到
          </template>
          {{ tongji[5] }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            正常上班
          </template>
          {{ tongji[6] }}
        </el-descriptions-item>

        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            下班未签到
          </template>
          {{ tongji[7] }}
        </el-descriptions-item>
      </el-descriptions>
      <el-table
        :data="displayTableData"
        stripe
        class="displayTable"
        style="width: 100%"
      >
        <el-table-column prop="attendance_date" label="日期" align="center">
        </el-table-column>
        <el-table-column label="打卡记录" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.updated_start_time }}</span>
            <span>,</span>
            <span>{{ scope.row.updated_end_time }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工作时长(h)" align="center">
          <span slot-scope="scope">{{
            (scope.row.updated_duration / 3600).toFixed(1)
          }}</span> </el-table-column
        ><el-table-column prop="status" label="状态" align="center">
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange2"
        @current-change="handleCurrentChange2"
        :current-page="xiangqing_fenye.pagenum"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="xiangqing_fenye.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="xiangqing_fenye.total"
      >
      </el-pagination>
    </el-dialog>
  </div>
</template>

<script>
import {
  getchuqindata,
  getalljzgchuqin,
} from "network/api/punchcard";

export default {
  props: {},
  data() {
    return {
      queryInfo: {
        query: {
          datetime: "",
          start_date: "",
          end_date: "",
        },
      },
      tableData: [],
      //个人出勤详情的数据
      displayTableData: [],
      //个人出勤详情的统计
      tongji:[],
      //
      tableStatus: [
        //       早退   迟到   请假   未签到   下班未签到   正常签到  补打卡
        { text: "早退", value: "早退" },
        { text: "迟到", value: "迟到" },
        { text: "请假", value: "请假" },
        { text: "放假", value: "放假" },
        { text: "未签到", value: "未签到" },
        { text: "下班未签到", value: "下班未签到" },
        { text: "正常签到", value: "正常签到" },
        { text: "补打卡", value: "补打卡" },
      ],
      displayDialogVisible: false,
      //出勤详情的名字
      userAttendanceName: "",
      //展示个人出勤详情的当前页
      xiangqing_fenye: {
        total: 0,
        pagesize: 5,
        pagenum: 1,
        id: null,
        user_name: "",
      },
    };
  },
  async created() {
    this.getalljzgchuqin();
  },
  mounted() {},
  methods: {
    dateFormat(dateData) {
      var date = new Date(dateData);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      const time = y + "-" + m + "-" + d;
      return time;
    },
    async getalljzgchuqin() {
      const data = {
        depart: '',
        level: '',
        zhiwei: '',
        teacher: window.sessionStorage.getItem('userid'),
      };

      const res = await getalljzgchuqin(
        data,
        1,
        1
      );
      if (res.status == "No") {
        this.$message.error(res.msg);
      } else {
        this.tableData = res.msg;
      }
      console.log(res, "出勤数据");
    },

    //展示个人的出勤详情
    async aaaopenDisplayInfo() {
      const date_now = this.dateFormat(new Date());
      if (
        this.queryInfo.query.start_date == "" ||
        this.queryInfo.query.start_date == null
      ) {
        this.$message.error("请选择开始日期");
        return;
      } else if (this.queryInfo.query.start_date == "") {
        this.$message.error("请选择结束日期");
        return;
      } else if (this.dateFormat(this.queryInfo.query.start_date) > date_now) {
        this.$message.error("开始日期不能超过今天");
        return;
      } else if (this.dateFormat(this.queryInfo.query.end_date) > date_now) {
        this.$message.error("结束日期不能超过今天");
        return;
      } else if (
        this.queryInfo.query.end_date < this.queryInfo.query.start_date
      ) {
        this.$message.error("结束日期在开始日期之前");
        return;
      }
      const start_date = this.dateFormat(this.queryInfo.query.start_date);
      const end_date = this.dateFormat(this.queryInfo.query.end_date);
      const datetime = start_date + "," + end_date;
      const res = await getchuqindata(
        this.xiangqing_fenye.id,
        datetime,
        this.xiangqing_fenye.pagesize,
        this.xiangqing_fenye.pagenum
      );

      if (res.status == "No") {
        this.$message.error(res.msg);
        this.displayTableData = [];
        this.tongji=[0,0,0,0,0,0,0,0]
        this.displayDialogVisible = false;
      } else {
        this.displayTableData = res.msg;
        this.tongji = res.tongji
        this.xiangqing_fenye.total = res.total;
        this.userAttendanceName = this.xiangqing_fenye.user_name;
        this.displayDialogVisible = true;
      }
      return true;
    },
    async openDisplayInfo(item) {
      this.xiangqing_fenye.id = item.id;
      this.xiangqing_fenye.user_name = item.user_name;
      await this.aaaopenDisplayInfo();
    },
    //关闭个人出勤详情页面
    displayHandleClose() {
      this.userAttendanceName = "";
      this.displaycurrentPage = 1;
      this.displayDialogVisible = false;
    },
    //详情: 处理每页显示数量变化的函数
    handleSizeChange2(val) {
      this.xiangqing_fenye.pagesize = val;
      this.aaaopenDisplayInfo();
    },
    handleCurrentChange2(val) {
      this.xiangqing_fenye.pagenum = val;
      this.aaaopenDisplayInfo();
    },
  },
};
</script>

<style lang="css">
.dataTable {
    margin: 40px auto;
}
.red {
    color: red;
}
.blue {
    color: #409EFF;
}
.statusEdit {
    padding-bottom: 20px;
}
.changeStatus {
    width: 350px;
}
.editStatusDistance {
    padding-top: 7px;
}
.displayTable {
    margin-bottom: 40px;
}
</style>
